<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="营销流水列表">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-select title="商户号" :up-table="true" name="mchtId" :options="mchtList" :value.sync ="mchtIdValue"></form-select>
                        <form-select title="电子券名称" :up-table="true" :sreach="true" name="value" :options="couponList"></form-select>
                        <form-select title="事件类型" :up-table="true" name="event" :options="eventTpe"></form-select>
                        <div style="height: 10px"></div>
                        <form-date-time title="开始时间" :up-table="true" name="beginTime"></form-date-time>
                        <form-date-time title="结束时间" :up-table="true" name="endTime"></form-date-time>
                        <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                        <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
        <modal-container title="详情" v-el:detail-modal v-ref:detail-modal class="edit-modal">
            <form @submit.prevent @reset.prevent v-el:detail-mform>
                <div class="modal-body">
                    <table class="table table-bordered table-hover">
                        <tr>
                            <td style="width:50%">交易流水号</td>
                            <td>{{item.seqNo}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户名称</td>
                            <td>{{item.mchtName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">电子券名称</td>
                            <td>{{item.name}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">券码</td>
                            <td>{{item.couNo}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">事件类型</td>
                            <td>{{(item.event == 'SCAN' && '扫码')||(item.event == 'SHARE' && '分享')||(item.event == 'USE' && '使用')}}</td>
                        </tr>

                        <tr>
                            <td style="width:50%">事件金额</td>
                            <td>{{item.eventAmt}}</td>

                        </tr>
                        <tr>
                            <td style="width:50%">代理商户</td>
                            <td>{{item.agentName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">代理店员</td>
                            <td>{{item.agentUsr}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">用户昵称</td>
                            <td>{{item.usrName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">流水类型</td>
                            <td>{{item.marketType == 'market'?'营销':'结算'}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">状态</td>
                            <td>{{item.state == '0'?'已发放':'未发放'}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">交易日期</td>
                            <td>{{item.txnDate}}</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <v-button class="pull--left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                </div>
            </form>
        </modal-container>
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>

    .btn{
        margin-top: 5px;
    }
</style>
<script>
    //解决datatables弹窗警告
    $.fn.dataTable.ext.errMode = 'none';
    import {
        dateTime,
        createDataTable
    } from 'ui/collections/general.js'
    var serialize = require('form-serialize');
    import {dateFormat} from "lib/method.js"
    import summernote from "pages/partial/summernote.vue";
    var serialize = require('form-serialize');

    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            mchtIdValue:'',
            val:'',
            mchtList: [],
            couponList:[],
            item: {},
            columnsSet: [],
            eventTpe:[
                {key: "所有",value: "0"},
                {key: "扫码",value: "1"},
                {key: "分享",value: "2"},
                {key: "使用",value: "3"}
            ]
        }),
        watch:{
            async mchtIdValue(v){
                if(v != ''){
                    await this.$post({
                        url: "/api/v2" + projectName_Url + "/plat/market/findCoupons",
                        data:{mchtId:v},
                        method:"POST"
                    }).then(response => {
                        let list = response.content.result;
                        if(list != '' && list != null){
                            list.unshift({key:"所有电子券",value:""});
                            this.$set("couponList", list);
                        }
                    }, error => {});
                }else{
//                    this.couponList = []
                    await this.$post({
                        url: "/api/v2" + projectName_Url + "/plat/market/findCoupons",
                        data:{mchtId:""},
                        method:"POST"
                    }).then(response => {
                        let list = response.content.result;
                        if(list != '' && list != null){
                            list.unshift({key:"所有电子券",value:""});
                            this.$set("couponList", list);
                        }
                    }, error => {});
                }
            }
        },
        methods: {
            resetBindDrag() {
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search: function () {
                dataTable.ajax.reload();
            },
            //重置按钮
            reset: function () {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            },
            getMcht() {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: '/api/v2' + projectName_Url + '/list/mcht/' + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    if(list != '' && list != [] && list != null){
                        if(list.length > 1){
                            list.unshift({key:"所有商户",value:""});
                            self.$set("mchtList", list);
//                        self.mchtIdValue = list[0].value
                        }else{
                            self.$set("mchtList", list);
                        }
                    }
                },  error => {});
            },
            getCoupon(){
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: '/api/v2' + projectName_Url + '/plat/market/findCoupons',
                    data:{mchtId:''},
                    method: "POST"
                }).then(response => {
                    let list = response.content.result;
                    if(list != '' && list != null){
                        list.unshift({key:"所有电子券",value:''});
                        self.$set("couponList", list);
                    }
                },  error => {});
            }
        },
        created() {
            //datatable所用数组
            columnsSet = [{
                title: "交易流水号",
                data: "seqNo",
                className: "operate"
            }, {
                title: "商户名称",
                data: "mchtName",
                className: "operate"
            },{
                title: "电子券名称",
                data: "name",
                className: "operate"
            },{
                title: "券码",
                data: "couNo",
                className: "operate"
            },{
                title: "事件类型",
                data: "event",
                className: "operate",
                render: function (data) {
                    if (data == "SCAN") {
                        return data = "扫码"
                    } else if (data == "SHARE") {
                        return data = "分享"
                    } else {
                        return data = "使用"
                    }
                }
            }, {
                title: "事件金额",
                data: "eventAmt",
                className: "operate"
            }, {
                title: "代理商户",
                data: "agentName",
                visible:false,
                className: "operate"
            }, {
                title: "代理店员",
                data: "agentUsr",
                visible:false,
                className: "operate"
            },{
                title: "用户昵称",
                data: "usrName",
                visible:false,
                className: "operate"
            },{
                title: "流水类型",
                data: "marketType",
                className: "operate",
                render: function (data) {
                    var value;
                    if(data == "market"){
                        value = '营销'
                    }else if(data == 'sett'){
                        value = '结算'
                    }else{
                        value = data
                    }
                    return value;
                }
            }, {
                title: "状态",
                data: "state",
                className: "operate",
                render: function (data) {
                    return (data == 0) ? "已发放" : "未发放"
                }
            },{
                title: "交易日期",
                data: "txnDate",
                className: "operate",
                render: function (data) {
                    return dateFormat(data)
                }
            },
                {
                title: "相关操作",
                className: "operate",
                render: function (value, type, row) {
                    return `
                     <button type="button" class="btn btn-defalt btn-sm detail">详情</button>
                `
                }
            }
            ]
        },

        ready: async function () {
            dateTime({
                format: "yyyy-mm-dd",
                minView: "2",
                startDate: "",
                endDate: ""
            })
            this.$set("columnsSet", columnsSet)
            var self = this;
            self.getMcht();
            self.getCoupon();
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function (data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                    //表单序列化数据
                    var _data = serialize(self.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = JSON.stringify(page);
                    //对开始日期进行数据处理
                    _data.beginTime = _data.beginTime.replace(/-/g, "");
                    _data.endTime = _data.endTime.replace(/-/g, "");
                    //判断日期
                    if(_data.beginTime.length>0 && _data.endTime.length>0){
                        if(_data.beginTime-_data.endTime > 0){
                            Midway.alert({title: "操作提示", content: '开始时间不能大于结束时间'})
                            // return false
                        }
                    }else if(_data.beginTime.length>0 && _data.endTime.length <=0){
                        Midway.alert({title: "操作提示", content: '结束时间不能为空'})
                        // return false
                    }else if(_data.beginTime.length <= 0 && _data.endTime.length > 0){
                        Midway.alert({title: "操作提示", content: '开始时间不能为空'})
                        // return false
                    }
                    //发送请求
                    var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                    var result = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/market/findWater/"+ mchtId,
                        data: _data,
                        method: "POST"
                    })
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    callback({
                        recordsTotal: result.content.total,
                        recordsFiltered: result.content.total,
                        data: result.content.result || []
                    })
                }
            });
            $(self.$el).on("click", ".detail", function () {
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                dataArray.txnDate = dateFormat(dataArray.txnDate);
                self.item = dataArray;
                dateTime()
                $(self.$els.detailModal).modal('show');
            });
        }
    }
</script>
